<template>
  <basic-container :btnFlag = true>
    <div style="border: 1px solid #d2d2d2;">
      <card-header :header-data="headerData"></card-header>
      <!--<div style="margin-top: 10px;margin-left: 10px;font-size: large;">-->
        <!--<font color="#696969">{{registerTitle}}</font>-->
      <!--</div>-->
      <transition name="fade1">
        <div v-if="!showall">
          <div :class="{showall:true,active:showall}">
            <bostech-detail :detail-data="detailData"></bostech-detail>
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div v-if="showall">
          <div :class="{showall:true,active:showall}">
            <bostech-detail :detail-data="detailData"></bostech-detail>
          </div>
        </div>
      </transition>
      <div class="collapse-title" :class="{active:showall}" @click="showall=!showall">
        <img v-if="!showall" :src="`${publicPath}img/packdown.png`" class="collapse-title-img">
        <p v-if="!showall" class="collapse-title-text">展开更多</p>
        <img v-if="showall" :src="`${publicPath}img/packUp.png`" class="collapse-title-img">
        <p v-if="showall" class="collapse-title-text">收起</p>
      </div>
      <div>
        <div
          style="padding-top: 19px;
                padding-left: 10px;
                padding-bottom: 7px;
                font-weight: 600;">
          历史反馈意见
        </div>

        <div class="chatbox">
          <msg-nobtn :msg-data="msgDataList" v-if="msgFlag"></msg-nobtn>
          <div v-if="!msgFlag" style="text-align: center;
                                      font-size: 18px;
                                      color: #3333;
                                      height: 300px;
                                      line-height: 300px;">
            暂无数据</div>
          <div style="margin-bottom: 30px;">
            <el-pagination
              @size-change="sizeChange"
              @current-change="onLoad"
              :current-page="page.currentPage"
              :page-size="page.pageSize"
              :total="page.total"
              :page-sizes="[10, 20, 30, 40 ,50 ,100]"
              layout="total, sizes, prev, pager, next, jumper"
              v-if="msgFlag"
              class="paginationcss">
            </el-pagination>
          </div>

        </div>
      </div>
      <div style="margin-top:20px;margin-left: 10px;" v-if="detail == 'false'">
        <p class='pr'>
          会商意见：
          <em></em>
          <textarea style='height:80px;width:749px;border: 1px solid #d2d2d2;border-radius:5px;' v-model="feedBackContent"></textarea>
        </p>
      </div>
      <div class="form-group form-padding" style="margin-bottom: 4rem;margin-top: 0rem;" v-if="detail == 'false'">
        <span class="form-label-small" style="float: left;margin-right: -49px;font-size: 16px">附件:</span>
        <el-upload
          class="upload-demo"
          ref="upload"
          :limit="1"
          :on-exceed="tipFileOne"
          action="string"
          :http-request="submitUpload"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="true"
          :on-change="fileChange">
          <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
        </el-upload>
      </div>
      <div style="text-align: center; margin-top: 40px;margin-bottom: 40px;" v-if="detail == 'false'">
        <el-button type="warning" @click.stop="sendMessage()">发送</el-button>
        <el-button type="info" @click.stop="goBack()">关闭</el-button>
      </div>
    </div>
  </basic-container>
</template>
<script>
  import chatMsg from '@/components/bostech/chat-msg'
  import msgNobtn from '@/components/bostech/msg-nobtn';
  import {topicDetail,topicMessage,messagePage,registerinfoBytopic} from '@/api/planning/message'
  import { mapGetters } from "vuex";
  import {PROJECT_DIC} from '@/const/dict';
  import {filedownload,UploadFile,getfileinfo} from "@/api/system";
  export default {
    name: "feedBack",
    components: {
      chatMsg,
      msgNobtn
    },
    data() {
      return {
        publicPath: process.env.BASE_URL,
        headerData:{
          title:'反馈'
        },
        msgDataList:[],//consultMsg组件内容？
        detailData: [],//class="collapse-title内容？
        showall: false,
        feedBackContent:'',//反馈内容
        registerTitle:'',//当前规划名称
        topicId:'',
        msgFlag:false,
        fileId:null,
        filenametemp:'',
        fileList:[],
        filenametemp1:'',
        msgListtemp:[],
        detail:false,
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },

      };
    },
    created:function(){
      this.topicId = this.$route.query.topicId;
      this.detail = this.$route.query.detail + '';
      this.init();
      this.getMessage()
    },
    computed: mapGetters([
      "userInfo"
    ]),
    watch:{
      msgDataList(val){
        if(val && val.length>0){
          this.msgFlag = true
        }else{
          this.msgFlag = false
        }
      }
    },
    methods: {
      init(){
        topicDetail(this.topicId).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data;
            this.detailData = [
              {label: '状态', value: '会商中', colorType: 'warning'},
              {label: '会商标题', value: record.title},
              {label: '会商内容', value: record.description},
              {label: '创建于', value: record.createTime},
            ]
          }
        });
        // registerinfoBytopic(this.topicId).then(response => {
        //   if (response.data.code == 0) {
        //     var record = response.data.data
        //     var registerCategory = PROJECT_DIC.CATEGORY.filter(item => item.value == record.category)
        //     this.detailData.push({label: '规划类型', value: registerCategory[0].label})
        //     this.registerTitle = record.title
        //   }
        // });
      },
      getMessage(){
        messagePage(Object.assign({
          current: 1,// 当前页数
          size: this.page.pageSize,// 每页显示多少条
          topicId:this.topicId,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;

            this.putList(record);
          }
        })
      },
      putList(record){
        this.msgListtemp=[];
        this.recursive(record);    //递归消息放入消息列msgListtemp中
        this.msgDataList=this.msgListtemp
      },
      recursive(record){
        for(var i in record){
          //判断是否是当前用户的消息，只显示当前用户的消息
          var flag = false;
          if(record[i].senderId == this.userInfo.userId){
            flag = true
          }

          if(record[i].parentId!==null){
            var righttemp = 1;     //是子消息
          }else {
            righttemp = 0;     //不是子消息
          }
          var msgDataMap = {
            orgName:record[i].senderNickname,
            nickName:record[i].senderNickname?record[i].senderNickname.substring(0,2):'',
            msgTime:record[i].sendTime,
            msgContent:record[i].content,
            replyFlag:flag,
            senderId:record[i].senderId,
            topicId:record[i].topicId,
            messageId:record[i].messageId,
            rightaway:righttemp,
            fileId:record[i].fileId,
            filenametemp:record[i].fileFullName,
          };
          this.msgListtemp.push(msgDataMap);
          if(record[i].children!==null){ //当还有子消息时继续递归
            this.recursive(record[i].children);
          }
        }
      },

      //消息分页
      onLoad(val){
        messagePage(Object.assign({
          current: val,// 当前页数
          size: this.page.pageSize,// 每页显示多少条
          topicId:this.topicId,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;

            this.putList(record);
          }
        })
      },
      sizeChange(val){
        messagePage(Object.assign({
          current: this.page.currentPage,// 当前页数
          size: val,// 每页显示多少条
          topicId:this.topicId,
          ascs:'send_time'
        })).then(response => {
          if (response.data.code == 0) {
            var record = response.data.data.records;
            this.page.currentPage = response.data.data.current;
            this.page.pageSize = response.data.data.size;
            this.page.total = response.data.data.total;

            this.putList(record);
          }
        })
      },


      goBack() {
        this.$router.go(-1);
      },
      sendMessage(){
        if(!this.feedBackContent){
          this.$message({
            message: '请先填写反馈内容',
            type: 'warning'
          });
          return;
        }
        var messageForm = {
          content:this.feedBackContent,
          senderId:this.userInfo.userId,
          topicId:this.topicId,
          fileId:this.fileId
        };
        topicMessage(messageForm).then(response => {
          if (response.data.code == 0) {
            this.$notify({
              title: "成功",
              message: "发送成功",
              type: "success",
              duration: 2000
            });
            this.getMessage();
            this.feedBackContent = '';
            this.fileId = null;
            this.fileList = [];
          }
        });
      },
      // 消息附件上传
      submitUpload(param) {
        const formData = new FormData();
        formData.append(param.file.uid, param.file);
        UploadFile(formData,{fileType:'2'}).then(response => {
          if (response.data.code == 0) {
            this.fileId = response.data.data;
            this.fileList = [{name: param.file.name, url: ''}];
            this.filenametemp = param.file.name;
            this.$notify({
              title: "成功",
              message: "上传成功",
              type: "success",
              duration: 2000
            });
          }
        }).catch(response => {
          this.fileList = [];
          this.$notify({
            title: "失败",
            message: "上传失败",
            type: "error",
            duration: 2000
          });

        })
      },
      fileChange(file){
      },

      handleRemove(file, fileList) {
        this.fileId = null;
      },
      handlePreview(file) {
        filedownload(this.fileId).then(response => {
          if(response.status==200){
            this.download(response.data,this.filenametemp)
          }
        }).catch((error) => {

        })
      },
      // 下载文件
      download (data,filename) {
        if (data==null) {

        }else{
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download',filename );
          document.body.appendChild(link);
          link.click()
        }
      },
      getfilename(fileId){
        return new Promise((resolve, reject) => {
          getfileinfo(fileId).then(response =>{
            if(response.data.code == 0){
              if(response.data.data!=null){
                var filenametemp = response.data.data.fileName+"."+response.data.data.extend;
                resolve(filenametemp);
              }
            }
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .head-title {
    color: rgb(2, 2, 2);
    text-align: left;
    display: inline;
  }

  .head-explain {
    color: #333;
    text-align: left;
    display: inline;
    font-size: 0.5rem;
  }

  .head-button {
    float: right;
  }

  .chatbox {
    /*height: 300px;*/
    width: 100%;
    border: 1px solid #d2d2d2;
    border-width: 1px 0;
    /*overflow-y: auto;*/
    padding-bottom: 30px;
  }

  .msg1 {
    height: 20px;
    width: 17px;
    margin-left: 10px;
  }

  .collapse-title {
    margin-top: 2rem;
    text-align: center;
    border-top: 1px solid #dedbdb;
    border-bottom: 1px solid #dedbdb;
    margin-top: 0px;
  }

  .collapse-title-text {
    color: #4297dc;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-left: 0.2rem;
  }

  .collapse-title-img {
    width: 1.2rem;
    position: relative;
    top: 0.25rem;
  }

  .showall {
    padding: 10px;
    height: 177px;       /*默认高度*/
    overflow: hidden;
    clear: both;
    margin-top: 6px;
  }

  .showall.active {
    height: auto;
    background: #fff;
    min-height: 150px;
  }

  .imgbtn {
    border-top: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 10px
  }

  .fade-enter-active {
    transition: opacity 0.9s ease-out;
  }

  .fade-leave-active {
    transition: opacity 0s ease-out;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  .fade1-enter-active {
    transition: opacity 0.9s ease-out;
  }

  .fade1-enter, .fade1-leave-to {
    opacity: 0;
  }

  .form-group {
    margin-top: 2rem;
  }

  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }

  .form-padding {
    padding-left: 43px;
  }

  .form-label-small {
    font-size: 14px;
    margin-right: 12px;
    display: inline-block;
    min-width: 101px;
  }

  .form-submit {
    text-align: center;
  }
  .paginationcss{
    margin-top: 20px;
    float: right;
    margin-right: 28px;
  }
</style>
